<template>
  <div class="category-container">
    <!-- 返回上一级按钮 -->
    <el-button type="text" @click="goBack" style="font-size:18px; margin-bottom: 10px;">
      <el-icon style="vertical-align: middle;"><ArrowLeft /></el-icon>
      返回
    </el-button>
    <h1 class="category-title">商品分类</h1>
    <el-row :gutter="32" class="category-list">
      <el-col :span="8" v-for="cat in categories" :key="cat.categoryId">
        <div
          class="category-card"
          :class="{ active: cat.categoryId === selectedCategoryId }"
          @click="selectCategory(cat)"
        >
          <img :src="cat.icon || defaultIcons[cat.name]" class="category-icon" />
          <div class="category-name">{{ cat.name }}</div>
          <div class="category-desc">{{ cat.desc || '' }}</div>
        </div>
      </el-col>
    </el-row>
    <!-- 分类下商品 -->
    <div class="category-products">
      <h2 class="products-title">{{ currentCategoryName }}商品</h2>
      <el-row :gutter="24">
        <el-col
          v-for="item in products"
          :key="item.productId"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="8"
          :xl="8"
        >
          <el-card class="product-card" shadow="hover" @click="goDetail(item.productId)" style="cursor:pointer;">
            <img :src="item.mainImage" class="product-img" />
            <div class="product-info">
              <div class="product-name">{{ item.name }}</div>
              <div class="product-price">￥{{ item.price }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="!loading && !products.length" class="placeholder-text">暂无商品</div>
      <div v-if="loading" class="placeholder-text">加载中...</div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted, computed } from 'vue';
import request from '@/utils/request';
import { ArrowLeft } from '@element-plus/icons-vue';

const router = useRouter();
const categories = ref([])
const selectedCategoryId = ref(null)
const products = ref([])
const loading = ref(false)
const defaultIcons = {
  '电子产品': 'https://img.icons8.com/color/96/000000/laptop.png',
  '服装': 'https://img.icons8.com/color/96/000000/t-shirt.png',
  '家居用品': 'https://img.icons8.com/color/96/000000/sofa.png'
}

const goBack = () => {
  router.back();
};

function collectCategoryIds(category) {
  let ids = [category.categoryId]
  if (category.children && category.children.length) {
    for (const child of category.children) {
      ids = ids.concat(collectCategoryIds(child))
    }
  }
  return ids
}

const selectCategory = (cat) => {
  selectedCategoryId.value = cat.categoryId
  fetchProductsByCategory(cat)
}

const fetchProductsByCategory = async (category) => {
  loading.value = true
  products.value = []
  const ids = collectCategoryIds(category)
  let all = []
  for (const id of ids) {
    try {
      const res = await request.get('/api/products', {
        params: { categoryId: id, page: 1, pageSize: 100, status: 1 }
      })
      if (res.list) all = all.concat(res.list)
    } catch {}
  }
  products.value = all
  loading.value = false
}

const currentCategoryName = computed(() => {
  const cat = categories.value.find(c => c.categoryId === selectedCategoryId.value)
  return cat ? cat.name : ''
})

const goDetail = (id) => {
  router.push(`/products/${id}`)
}

onMounted(async () => {
  const res = await request.get('/api/categories')
  categories.value = res || []
  if (categories.value.length) {
    selectedCategoryId.value = categories.value[0].categoryId
    fetchProductsByCategory(categories.value[0])
  }
})
</script>

<style scoped>
.category-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.category-title {
  font-size: 32px;
  color: #1a365d;
  margin-bottom: 40px;
  text-align: center;
  font-weight: bold;
}
.category-list {
  margin-top: 24px;
  margin-bottom: 32px;
}
.category-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 48px 0 32px 0;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s, border 0.2s;
  border: 2px solid transparent;
}
.category-card.active, .category-card:hover {
  box-shadow: 0 4px 24px rgba(67,97,238,0.15);
  border: 2px solid #409eff;
}
.category-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}
.category-name {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.category-desc {
  color: #888;
  font-size: 15px;
}
.category-products {
  margin-top: 40px;
}
.products-title {
  font-size: 24px;
  color: #1a365d;
  margin-bottom: 24px;
  font-weight: bold;
  text-align: left;
}
.product-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(67,97,238,0.08);
  transition: box-shadow 0.2s;
  margin-bottom: 32px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 18px 0 10px 0;
}
.product-card:hover {
  box-shadow: 0 4px 24px rgba(67,97,238,0.18);
  border-color: #409eff;
}
.product-img {
  width: 80%;
  max-width: 240px;
  height: 180px;
  object-fit: contain;
  margin: 24px auto 12px auto;
  display: block;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.product-info {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #222d32;
  word-break: break-all;
}
.product-price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
.placeholder-text {
  font-size: 20px;
  color: #718096;
  text-align: center;
  padding: 50px 0;
}
</style>